<template>
  <!-- 自制MV页 -->
  <div>
    <div class="own-mv" v-if="lists.data">
      <div class="head">
        <h1 class="small-title">{{lists.data.video.title}}</h1>
        <span class="iconfont icon-zuojiantou" @click="$router.go(-1)"></span>
      </div>
      <div class="mv">
        <video :src="lists.data.resource.lowest.https_url" :poster="lists.data.video.cover" controls width="100%"
          height="210px" ref="video"></video>
        <span class="iconfont " :style="{opacity:appear?1:0}" :class="iconShow?'icon-24gf-play':'icon-zanting'"
          @click="playMv"></span>
      </div>
      <div class="explain">
        <h1 class="title">{{lists.info.title}}</h1>
        <div v-html="lists.info.msg"></div>
        <div class="whole">
          <p :class="see?'van-multi-ellipsis--l2':''">{{lists.info.intro|delLast}}</p>
          <span class="iconfont " :class="see?'icon-xiajiantou':'icon-shangjiantou'"
            @click="retract">{{lists.info.intro|last}}</span>
        </div>
      </div>
      <div class="Drama">
        <h6>1-{{ lists.tvList.length}}</h6>
        <ul>
          <li v-for="(ele,index) in lists.tvList" :key="index" class="van-hairline--bottom"
            @click="toPlay(ele.href,index)">
            <div class="left">
              <img v-lazy="ele.img" alt="" :style="{filter:active==index?'brightness(50%)':'brightness(100%)'}">
              <span class="play-time">{{ele.duration}}</span>
              <span class="play-icon" :style="{display:active==index?'block':'none'}">正在播放</span>
            </div>
            <div class="right">
              <h3 class="van-multi-ellipsis--l2">{{ele.title}}</h3>
              <p>{{ele.addtime}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <van-loading type="spinner" color="#1989fa" v-if="!lists.data" />
  </div>
</template>

<script>
  import {
    getPlotLists,
    getPlotListsNumber
  } from "../api/ownMv"
  export default {
    props: ['id'],
    data() {
      return {
        lists: [],
        see: true,
        iconShow: true,
        appear: true,
        active: 0 //排他
      }
    },
    methods: {
      retract() {
        this.see = !this.see;
      },
      toPlay(id, index) {
        getPlotListsNumber(id).then(data => {
          console.log(data);
          this.lists.data.video.title = data.data.video.title;
          this.lists.info.title = data.data.video.title;
          this.lists.data.video.cover = data.data.video.cover
          this.lists.data.resource.lowest.https_url = data.data.resource.lowest.https_url
        });
        this.iconSh = true,
          this.appear = true;
        this.active = index;
      },
      playMv() {
        this.appear = true;
        if (this.iconShow) {
          this.$refs.video.play();
          this.iconShow = !this.iconShow;
          this.appear = false;
        } else {
          this.$refs.video.pause();
          this.iconShow = !this.iconShow
          this.appear = true;
        }
      },
    },
    created() {
      getPlotLists(this.id).then(data => {
        this.lists = data;
        console.log("自制", this.lists);
      })
    },
    filters: {
      last(val) {
        return val.substring(val.length - 4, val.length);
      },
      delLast(val) {
        return val.replace('查看全部', '')
      }
    }
  }
</script>

<style lang="less" scoped>
  .own-mv {
    background-color: #fff;
    position: relative;

    .head {
      background-color: #000;
      text-align: center;

      span {
        position: absolute;
        left: 22px;
        top: 14px;
        color: #fff;
        font-size: 18px;
      }
    }

    .mv {
      position: relative;
      margin-top: -1px;

      &>span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 70px;
        color: #fff;
        opacity: 1;
        transition: all 3s;
      }
    }

    .small-title {
      margin: 0 auto;
      color: #fff;
      line-height: 50px;
      width: 186px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
    }

    .title {
      line-height: 26px;
      font-size: 18px;
      font-weight: 600;
      color: #000;
    }

    .explain {
      line-height: 26px;
      font-size: 14px;
      color: #ccc;
      padding: 0 14px;

      .whole {
        margin-top: 16px;
        text-align: center;

        span {
          line-height: 38px;
          font-size: 14px;
          text-align: center;
        }
      }
    }

    .Drama {
      &>h6 {
        line-height: 28px;
        font-size: 14px;
        border-bottom: 1px solid #0065fa;
      }

      li {
        display: flex;
        padding: 26px 12px;

        .left {
          position: relative;
          width: 116px;
          height: 78px;

          img {
            width: 100%;
            height: 100%;
          }

          .play-time {
            position: absolute;
            bottom: 5px;
            right: 2px;
            color: #fff;
            font-size: 10px;
          }

          .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            color: #fff;
            z-index: 2;
            font-weight: 600;
          }
        }

        .right {
          flex: 1;
          line-height: 20px;
          padding: 6px 0 0 6px;
          font-size: 16px;

          p {
            color: #ccc;
            font-size: 14px;
          }
        }
      }
    }
  }
      .van-loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 9;
    }
</style>